<template>
  <div class="flex-container">
    <div class="left">
      <Tree @change="onChangeTree"></Tree>
    </div>
    <div class="right">
      <el-row :gutter="20" class="mb20" style="margin-right: 0;">
        <el-col :span="4">
          <el-input v-model="req._driverMemberName_" type="text" placeholder="请输入驾驶员" @change="search"></el-input>
        </el-col>
        <el-col :span="4">
          <el-input v-model="req._code_" type="text" placeholder="请输入车牌号" @change="search"></el-input>
        </el-col>
        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
        </el-col>
      </el-row>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip>
          <template slot-scope="{$index}">
            {{ $index + 1 + (req.page - 1) * req.pageSize }}
          </template>
        </el-table-column>
        <el-table-column prop="code" label="车牌号" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="driverMemberName" label="驾驶员" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="groupName" label="部门" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="thirdCode" label="第三方编码" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="online" label="状态" align="left" show-overflow-tooltip>
            <template slot-scope="{row}">
                {{row.online == 1?'在线': '离线'}}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="center">
          <template slot-scope="{ row }">
            <el-button @click="edit(row)" type="text" size="small">编辑</el-button>
            <el-button @click="del(row)" type="text" size="small">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination v-show="total" :total="total" :page.sync="req.page" :limit.sync="req.pageSize" @pagination="getList"></Pagination>
    </div>


    <Edit :show.sync="showEdit" :group="group" :item="currentItem" @confirm="search"></Edit>
  </div>
</template>
<script>
import Edit from './components/edit'
import { getList, remove } from '@/api/car'

export default {
    components: {
      Edit,
    },
  data() {
    return {
      group: null,
      req: {
        page: 1,
        pageSize: 20,
      },
      total: 0,
      tableData: [],
      currentItem: {},
      showEdit: false,
      showDetail: false,
      currentCarNo: "",
      currentId: null,
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    onChangeTree(data) {
      this.group = {...data};
      this.req.groupPath_ = data.groupPath;
      this.search()
    },
    search() {
        this.req.page = 1;
        this.getList()
    },
    async getList() {
        try {
            const res = await getList(this.req);
            this.tableData = res.data;
            this.total = res.total;
        } catch (error) {
            
        }
    },
    add() {
        if(!this.group) return this.$message.error('请选择部门');
        this.showEdit = true;
    },
    edit(row) {
        this.currentItem = structuredClone(row);
        this.showEdit = true;
    },
    unbind() {},
    del(row) {
        this.$modal.confirm('确定移除此车牌吗？').then(async () => {
            return remove({id: row.id})
        }).then(res => {
            this.$modal.msgSuccess('操作成功！')
            this.getList()
        })
    },
  },
};
</script>
